<template>
    <div id="echarts" ref="chart" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'PieChart',
    
    props: {
        total: {
            type: Number,
            default: 0 // 默认值为 0
        }
    },
    
    mounted() {
        this.renderChart();
    },
    methods: {
       
        renderChart() {
            const chartDom = this.$refs.chart;
            const myChart = echarts.init(chartDom);

            const option = {
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '环形图',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false // 悬停时不显示标签
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: 0.3,
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 1,
                                        y: 1,
                                        x2: 0, // 从左到右渐变
                                        y2: 0,
                                        colorStops: [
                                            { offset: 0, color: '#f7be1d' }, // 渐变色起始颜色
                                            { offset: 1, color: '#f7be1d00' }  // 渐变色结束颜色
                                        ]
                                    }
                                }
                            },
                            {
                                value: 2,
                                name: '2',
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 1,
                                        y: 1,
                                        x2: 0, // 从左到右渐变
                                        y2: 0,
                                        colorStops: [
                                            { offset: 0, color: '#3ea0ff' }, // 渐变色起始颜色
                                            { offset: 1, color: '#3ea0ff00' }  // 渐变色结束颜色
                                        ]
                                    }
                                }
                            },
                            {
                                value: 2.25,
                                name: '2.25',
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 1,
                                        y: 1,
                                        x2: 0, // 从左到右渐变
                                        y2: 0,
                                        colorStops: [
                                            { offset: 0, color: '#84FAB0' }, // 渐变色起始颜色
                                            { offset: 1, color: '#3dfbaf03' },  // 渐变色结束颜色

                                        ]
                                    }
                                }
                            }
                        ]
                    }
                ],
                graphic: {
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: `${this.total}\n总数`, 
                        textAlign: 'center',
                        fill: '#FFFFFF', // 文字颜色
                        fontSize: '0.5rem',
                        fontWeight: 'bold'
                    }
                }
            };

            myChart.setOption(option);
        }
    }
};
</script>
<style lang="less" scoped>
#echarts {
    
}
</style>